<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script> -->
    <script type="text/javascript" src="/assets/lib/axios/0.21.1/axios.min.js"></script>
    <script type="text/javascript" src="/hy5b/axiosReq/axiosReq.js"></script>
    
  </head>
  <body>
	<p>
      <input id="url" size="60"/>
      <select id="type">
        <option value="GET" selected>GET</option>
        <option value="POST">POST</option>
        <option value="PUT">PUT</option>
        <option value="DELETE">DELETE</option>
      </select>
      <input type="checkbox" id="withCredentials">withCredentials
  </p>
  <p>
    	<textarea rows="3" cols="60" id="header" placeholder="header"></textarea>
	</p>
  <p>
    	<textarea rows="6" cols="60" id="data" placeholder="params or data"></textarea>
	</p>
  <p>
    	<button onclick="submit()">提交</button>
	</p>
  <p>
      <pre id="result" style="height: 300px; overflow: auto; border: 1px solid #ccc;"></pre>
  </p>

    <script>
      function toJs(str) {
        return eval(`(${str})`)
      }
      function submit() {
        const type = document.getElementById('type').value
        const url = document.getElementById('url').value
        const header = document.getElementById('header').value
        const data = document.getElementById('data').value
        const withCredentials = document.getElementById('withCredentials').checked;

        console.log(type, url)

        const request = axiosReq.create();
        request.defaults.withCredentials = withCredentials ? true : false;

        request({
          url: url,
          method: type,
          headers: header ? toJs(header) : {},
          params: type === 'GET' && data ? toJs(data) : {},
          data: type !== 'GET' && data ? toJs(data) : {}
        }).then(res => {
          document.getElementById("result").innerHTML = JSON.stringify(res, null, 2);
        }).catch(e => {
          document.getElementById("result").innerHTML = "error"
        })
      }
    </script>
    
  </body>
</html>
